<template>
	<view class="nav-wrap" :style="{height:(2*nav_height+10)+'px'}">
        <view v-if="!flag" class='nav-title' :style='{lineHeight:(nav_height*2 + 44)+"px"}'>{{title}}</view>
        <view v-else  class="nav-title nav-yeji" :style='{lineHeight:(nav_height*2 + 44)+"px"}'>
            <view class="yeji-item" >
                <view >
                    好友
                </view>
                <view class="post">1</view>
            </view>
            <view class="yeji-item ">
                <view >
                    业绩
                </view>
                <view class="post">2</view>
            </view>
        </view>
        <view class='nav-capsule' :style='{height:(nav_height*2 + 44)+"px"}' > 
            <view @click='navback' >
                <u-icon class="back-pre" name="arrow-left" color="#fff" size="36"></u-icon>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name:"sub-head",
        props:{
            title:String,
            flag:Boolean
        },
        methods:{
			navback(){
				uni.navigateBack(1)
			}
		}
    }
</script>

<style lang="scss" >

.nav-wrap {
    position: fixed;
    width: 100%;
    top: 0;
    background: linear-gradient(-90deg, #B90C08, #FF6600, #FFC200);
    color: #FFF;
    z-index: 9999999;
	font-size: 36rpx;
	color: #FFF;
    padding-bottom: 37rpx;
    font-family: PingFang SC;
    font-weight: 500;
}

/* 标题要居中 */
.nav-title {
    position: absolute;
    text-align: center;
    max-width: 400rpx;
	width:100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    font-weight: normal;
}

.nav-yeji{
    display: flex;
   
    .yeji-item{
        margin:0 60rpx;
        position: relative;
        text-align: center;
        height:50rpx;
        .post{
            border-bottom:4rpx solid #fff;
            width:72rpx;
            height:4rpx;
            background: #fff;
            position: absolute;
            top:22rpx;
            z-index:12340000;
        }
    }
}

.nav-capsule {
    display: flex;
    align-items: center;
    margin-left: 30rpx;
    width: 140rpx;
    justify-content: space-between;
    height: 100%;
}
  
.navbar-v-line {
    width: 1px;
    height: 32rpx;
    background-color: #e5e5e5;
}
  
.back-pre, .back-home {
    width: 36rpx;
    height: 36rpx;
    margin-top: 8rpx;
    padding: 10rpx;
}
.nav-capsule .back-home {
    width: 36rpx;
    height: 40rpx;
    margin-top: 3rpx;
}
</style>
